<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    
    <title>琅時的学习版boost 搜索引擎</title>
    <style>
        /*去掉默认内外边距*/
        *{
            /*外边距*/
            margin: 0;
            /*内边距*/
            padding: 0;
        }
        /*body内容百分百在HTML呈现*/
        html,
        body{
            height: 100%;
        }
        /*类选择器*/
        .container{
            /*设置div的宽度*/
            width: 800px;
            /*外边距设置居中对齐*/
            margin: 0px auto;
            /* 设置外边距的上边距,保持距离 */
            margin-top: 15px;
        }
        /* 复合选择器,container下的search */
        .container .search{
            /* 宽度与父标签一致 */
            width: auto;
            /* 高度设置52px */
            height: 50px;
        }
        /* 选中input标签 直接设置标签属性先选中 标签选择器*/
        /* 没有考虑边框的问题 */
        .container .search input{
            /* 设置left浮动 */
            float: left;
            width: 600px;
            height: 50px;
            /* 一个像素点 */
            /* 设置边框属性:宽度样式颜色 */
            border: lpx solid coral;
            /* 去掉输入右边框 */
            border-right: none;
            /* 设置内边距不靠左 */
            padding-left: 10px;
            /* 设置字体颜色样式 */
            color: antiquewhite;
            font-size: 15px;
        }
        /* 选中button标签设置属性 */
        .container .search button{
            /* 设置left浮动 */
            float: left;
            width: 180px;
            height: 52px;
            /* 设置button的背景颜色 */
            background-color: coral;
            /* 设置button中的字体颜色 */
            color: azure;
            /* 设置字体大小 */
            font-size: 19px;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

        }
        .container .result{
            width: 100%;
        }
        .container .result .item{
            margin-top: 15px;
        }
        .container .result .item a{
            /* 块级元素单独一行 */
            display: block;
            /* a标签的下划线去掉 */
            text-decoration: none;
            /* 字体 */
            font-size: 21px;
            /* 颜色 */
            color: orangered;
        }
        /* 展示下划线 */
        .container .result .item a:hover{
            text-decoration: underline;
        }
        .container .result .item p{
            margin-top: 5px;
            font-size: 15px;
            font-family: Arial, Helvetica, sans-serif;
        }
        .container .result .item i{
            display: block;
            font-style: normal;
            color: darkorange;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="search">
            <input type="text" value="您要搜索的关键字">
            <button onclick="Search()">让我看看!</button>
        </div>

        <div class="result">
            <!-- 动态生成 -->
            <!-- <div class="item">
                <a href="#">您想要什么标题呢</a>
                <p>这是一些没用的测试摘要,您想要什么摘要呢~~</p>
                <i>https://www.bilibili.com/video/BV1GJ411x7h7/?spm_id_from=333.337.search-card.all.click</i>
            </div>
            <div class="item">
                <a href="#">您想要什么标题呢~(点开有惊喜)</a>
                <p>这是一些没用的测试摘要,您想要什么摘要呢~~</p>
                <i>https://www.bilibili.com/video/BV1GJ411x7h7/?spm_id_from=333.337.search-card.all.click</i>
            </div>
            <div class="item">
                <a href="#">您想要什么标题呢~(点开有惊喜)</a>
                <p>这是一些没用的测试摘要,您想要什么摘要呢~~</p>
                <i>https://www.bilibili.com/video/BV1GJ411x7h7/?spm_id_from=333.337.search-card.all.click</i>
            </div>
            <div class="item">
                <a href="#">您想要什么标题呢~(点开有惊喜)</a>
                <p>这是一些没用的测试摘要,您想要什么摘要呢~~</p>
                <i>https://www.bilibili.com/video/BV1GJ411x7h7/?spm_id_from=333.337.search-card.all.click</i>
            </div> -->
        </div>
    </div>
    <script>
        function Search(){
            // 弹出框
            // alert("hhh");
            //提取数据
            // $理解为Jquery的别称
            let query = $(".container .search input").val();
            console.log("query = " + query);//console是浏览器对话框查看js数据

            //http请求 ajax后端交互
            $.ajax({
                type: "GET",
                url: "/s?word=" + query,
                success: function(data){
                    console.log(data);
                    BuildHtml(data);
                }
            });
        }

        function BuildHtml(data){
            // 获取result标签
            let result_lable = $(".container .result");
            //清空历史结构
            result_lable.empty();

            for( let elem of data){
                //console.log(elem.title);
                //console.log(elem.url);
                let a_lable = $("<a>", {
                    text: elem.title,
                    href: elem.url,
                    //跳转
                    target: "_blank"
                });
                let p_lable = $("<p>", {
                    text: elem.desc
                });
                let i_lable = $("<i>", {
                    text: elem.url
                });
                let div_lable = $("<div>", {
                    class: "item"
                });

                a_lable.appendTo(div_lable);
                p_lable.appendTo(div_lable);
                i_lable.appendTo(div_lable);
                div_lable.appendTo(result_lable);

            }
        }
    </script>
</body>
</html>


